<script setup>
import Editor from '@tinymce/tinymce-vue'
import "tinymce/skins/content/default/content.css";
import tinymce from "tinymce/tinymce";
import {computed, nextTick, onMounted, ref, watchEffect,defineModel,defineEmits} from "vue";
import RemarkHoverEnlargable from "@/components/RemarkHoverEnlargable.vue";
import HoverEnlargable from "@/components/HoverEnlargable.vue";
import {Check} from "@element-plus/icons-vue";

let props = defineProps(["showContenRawTag","currentEditingIdx","pwidth","pheight"]);
let emits = defineEmits(["remarkEditDone"])

let theHtmlContentStr = ref(``);
let vModel = defineModel();

let cptTheModelValue = computed(()=>{
    if(vModel){
        return vModel;
    }else{
        return theHtmlContentStr;
    }
})
function settingUp(theEditor) {
    tinymce.PluginManager.load("template", '/public/tinymce/plugins/template/plugin.js');
    // console.log("theEditor,",theEditor);
    tinymce.activeEditor?.execCommand('LineHeight', false, '1');
}

onMounted(()=>{

})

// let theHtmlContentStr = ref(`<p>sdafjksafads</p> <ul> <li>dfdalkfkdas</li> <li>sdflajdsafkjk</li> <li>dsfsadf</li> </ul> <hr> <div className="space-y-2"> <div className="space-y-2"> <section className="prose-lg max-w-none py-1"> <div className="-mb-4"> <h1 className="inline !mb-1 scroll-m-16 text-3xl font-bold">merge</h1> <div className="pl-2 flex-1 text-textSecondary text-xl font-serif">(v.)</div> <span id="#14670" className="scroll-m-16 text-3xl font-bold flex items-center"></span></div> <section className=""> <p>1630年代，&ldquo;沉没或陷入&rdquo;（某物中），这个意义现已过时，源自拉丁语&nbsp;<em className="foreign notranslate">mergere</em>&nbsp;&ldquo;<strong>浸泡，浸入</strong>，沉浸&rdquo;，可能是从&nbsp;<em className="foreign notranslate">*mezgo</em>&nbsp;转音而来，源自 PIE&nbsp;<em className="foreign notranslate">*mezgo-</em>&nbsp;&ldquo;浸泡，沉没，洗涤，投入&rdquo;（源头还包括梵文&nbsp;<em className="foreign notranslate">majjanti</em>&nbsp;&ldquo;沉没，潜入&rdquo;，立陶宛语&nbsp;<em className="foreign notranslate">mazgoju, mazgoti,</em>，拉脱维亚语&nbsp;<em className="foreign notranslate">mazgat</em>&nbsp;&ldquo;洗涤&rdquo;）。</p> <p>不及物动词意为&ldquo;沉没或消失于其他事物中，被<strong>吞噬，失去身份</strong>&rdquo;，始见于1726年，特指法律上的&ldquo;<strong>将财产、合同等吸收到另一个中</strong>&rdquo;。及物动词&ldquo;使被吸收或消失于其他事物中&rdquo;的意义始见于1728年。相关词汇：&nbsp;<em className="foreign notranslate">Merged</em>；&nbsp;<em className="foreign notranslate">merging</em>。名词用法始见于1805年。</p> </section> <div className="-mt-4"> <p className="text-sm caret-gray-400 flex items-center">同样来自于:<a className="ml-1 pl-1 mt-1 flex items-center no-underline" href="https://www.etymonline.com/search?sort=a&amp;q=from%3A1630s" rel="nofollow">1630s</a></p> </div> </section> </div> </div> <div className="space-y-2"><hr></div> <div className="space-y-2"> <h1 className="word__name--TTbAA" title="Origin and meaning of wash">wash&nbsp;(v.)</h1> <section className="word__defination--2q7ZH"> <p>Old English&nbsp;<span className="foreign notranslate">wascan</span>&nbsp;"to <strong>wash, cleanse, bathe</strong>," transitive sense in late Old English, from Proto-Germanic&nbsp;<span className="foreign notranslate">*watskan</span>&nbsp;"to wash" (source also of Old Norse&nbsp;<span className="foreign notranslate">vaska</span>, Middle Dutch&nbsp;<span className="foreign notranslate">wasscen</span>, Dutch&nbsp;<span className="foreign notranslate">wassen</span>, German&nbsp;<span className="foreign notranslate">waschen</span>), from PIE root&nbsp;<a className="crossreference notranslate" title="Etymology, meaning and definition of *wed- " href="https://www.etymonline.com/word/*wed-#etymonline_v_52591" rel="nofollow">*wed-</a>&nbsp;(1) "water; wet." Related:&nbsp;<span className="foreign notranslate">Washed</span>;&nbsp;<a className="crossreference notranslate" title="Etymology, meaning and definition of washing " href="https://www.etymonline.com/word/washing">washing</a>.</p> <p>Used mainly of clothes in Old English (the principal verb for washing the body, dishes, etc. being&nbsp;<span className="foreign notranslate">&thorn;wean</span>). Old French&nbsp;<span className="foreign notranslate">gaschier</span>&nbsp;"to <strong>stain, soil; soak, wash</strong>" (Modern French&nbsp;<span className="foreign notranslate">g&acirc;cher</span>) is from Frankish&nbsp;<span className="foreign notranslate">*waskan</span>, from the same Germanic source. Italian&nbsp;<span className="foreign notranslate">guazzare</span>&nbsp;also is a Germanic loan-word. To&nbsp;<span className="foreign notranslate">wash (one's) hands of</span>&nbsp;something is 1550s, from Pilate in Matthew xxvii.24. To&nbsp;<span className="foreign notranslate">wash up</span>&nbsp;"clean utensils after a meal" is from 1751.&nbsp;<span className="foreign notranslate">Washed up</span> "no longer effective" is 1923, theater slang, from notion of washing up at the end of a job.</p> </section> </div>`);


</script>

<template>
    <div>
        <main id="sample">
            <Editor
                    v-model="vModel"
                    api-key="dxvhhu17oa85ujnbc57m43tuc0cmrovkrezy5j09qylqrhnb"
                    :init="{
                    height:pheight?pheight:250,
                    width:pwidth?pwidth:500,
                    resize: 'both',
                    skin_url: `/tinymce/skins/ui/oxide`,
                    content_css:`/tinymce/skins/content/default/content.css`,
                    // plugins_url:`http://localhost:5173/tinymce/plugins/`,
                    toolbar_mode: 'sliding',
                    plugins: 'fullscreen template preview anchor autolink charmap codesample emoticons image link lists searchreplace table visualblocks wordcount',
                    // plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount checklist mediaembed casechange export formatpainter pageembed linkchecker a11ychecker tinymcespellchecker permanentpen powerpaste advtable advcode editimage advtemplate ai mentions tinycomments tableofcontents footnotes mergetags autocorrect typography inlinecss',
                    toolbar: 'fullscreen preview template| undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table mergetags | addcomment showcomments | spellcheckdialog a11ycheck typography | align lineheight | checklist numlist bullist indent outdent | emoticons charmap | removeformat',
                    line_height_formats: '0.3 0.5 0.7 0.9 1 1.1 1.2 1.3 1.4 1.5 1.6 2',
                    content_style: 'body { line-height: 1; }',
                    tinycomments_mode: 'embedded',
                    tinycomments_author: 'Author name',
                    contextmenu: 'template link image table',
                    mergetags_list: [
                      { value: 'First.Name', title: 'First Name' },
                      { value: 'Email', title: 'Email' },
                    ],
                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }',
                    template_mdate_format: '%m/%d/%Y : %H:%M:%S',
                    templates: [
                      { title: 'Mdate', description: 'Mdate example', content: '<p class=`mdate`>This will be replaced with the date modified</p>' }
                    ],
                    ai_request: (request, respondWith) => respondWith.string(() => Promise.reject(`See docs to implement AI Assistant`)),
                     setup: settingUp
                    }"
                    initial-value="Welcome to TinyMCE!"
            />
        </main>
    </div>

  <div style="float: right;margin-right: 5px">
    <div class="my-button-group">
      <button class="my-button" @click="tinymce.activeEditor?.execCommand('LineHeight', false, '1');">default lh</button>
      <button class="my-button" @click="emits(`remarkEditDone`)"> <el-icon><Check/></el-icon></button>
    </div>
  </div>
<!--    <div style="float: right"><el-button @click="tinymce.activeEditor?.execCommand('LineHeight', false, '1');">default lh</el-button></div>-->
<!--    <br/>-->
    <HoverEnlargable v-if="showContenRawTag"
            style="
              --aniToWidth:450px;
              --aniToHeight:fit-content;
              --shrinkedWidth:50px;
              --shrinkedHeight:18px;
              --overlieWidth:11px;
              --aniFromWidthType:--shrinkedWidth;
              border: 1px solid blue;
              margin-left: 3px"
            :style="{zIndex:parseInt($attrs[`zIndex`])}">
        <div className="theRmkContent">
            cptTheModelValue:{{ vModel }}
        </div>
    </HoverEnlargable>
<!--    <el-button>showIt</el-button>-->
</template>

<style scoped>
:global(.tox.tox-tinymce-aux) {
    z-index: 19891014;
}

:global(.tox-promotion) {
    display: none;
}

:global(.tox-statusbar__branding) {
    display: none;
}

:global(.tox-toolbar-overlord .tox-toolbar__group .tox-tbtn) {
    margin: 1px 1px 0 0;
    /*width: 50px;*/
}

:global(.tox-toolbar-overlord .tox-toolbar__group .tox-tbtn--bespoke.tox-tbtn[aria-haspopup]) {
    width: 70px;
}

:global(.tox-toolbar-overlord .tox-toolbar__group[title]) {
    padding: 0 0 0 1px;
}

:global(.tox-mbtn.tox-mbtn--select[aria-haspopup]) {
    margin: 0 1px 1px 0;
    height: 20px;
}

:global(.tox-editor-container .tox-promotion .tox-toolbar__primary) {

}

@media (min-width: 1024px) {
    #sample {
        display: flex;
        flex-direction: column;
        place-items: center;
        width: 100%;
    }
}
</style>